<template>
	<view>
		<div class="header pageTitle"
			:style="'box-sizing: border-box;background: url('+bg+') no-repeat;background-size: 100%;'">

			<div class="content">
				<p class="gameMoney">
					<span>宝宝币</span>
					<span class="add" @click="record">提现记录</span>
				</p>
				<div class="second">
					<p class="nums">{{curDiamondIncome}}</p>
					<div class="flex">
						<div class="exchange" @click="gemchange">兑换钻石</div>
					</div>
				</div>
			</div>
		</div>
		<div class="pos">
			<div class="show">
				<div class="title">收入明细</div>
				<div class="item">
					<div class="detail" v-for="(item,index) in incomeList" :key="index">
						<span class="gift">{{item.type|typeFilter}}</span>
						<span class="money">+{{item.income}}</span>
						<p class="time">{{item.insdt|upddtFilter}}</p>
					</div>
				</div>
				<div class="more" @click="viewAll">查看全部<span class="icon"></span></div>
			</div>
		</div>
		
		<!-- 提现功能尚未完善 -->
		<div class="bt">
			<view class="txian"  @click="next()"  >
				提现
			</view>
		</div>
		
		<view class="popupBox" v-if="show" @click="show=false"></view>
		<view class="popup-info change" v-if="show">
			<div class="prop1">
				<i class="icon1"></i>
				<div class="title">兑换钻石</div>
				<input type="tel" class="num" v-model="num" placeholder="请输入要兑换的宝宝币数量">
				<div class="content">
					<p class="contentTitle">可兑换宝宝币：</p>
					<p class="contentNum">{{curDiamondIncome}}宝宝币</p>
					<div class="all" @click="allPay">全部兑换</div>
					<div :class="num==''?'btnNone':'btn'"
						:style="num==''?'background: url('+btn1+')  0% 0% / cover no-repeat;':'background: url('+btn3+') 0% 0% / cover no-repeat;'"
						@click="exchangeDiamondIncome">
						<span>确认兑换</span>
					</div>
				</div>
			</div>
			<!-- <view class="title">兑换钻石</view>
			<input type="text" value="" v-model="num" placeholder="请输入要兑换的宝宝币数量" />
			<view>可转出金额：</view>
			<view>{{curDiamondIncome}}宝宝币</view>
			<view @click="allPay">全部兑换</view>
			<view @click="exchangeDiamondIncome">确认兑换</view> -->
		</view>
		<!-- 兑换宝石弹框 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				$BASE_URL:this.$BASE_URL,
				show: false,
				num: '',
				curDiamondIncome: 0,
				// 控制兑换宝石
				change: false,
				incomeList: [],
				withdrawPointConfig: {}, // 提现提示配置信息
				isFamilySlevel: '', // 是否需要签名
				isWriteFlag: '', // 是否填写过银行卡信息
				docUrl: '',
				isSignatureFlag: '',
				href:'',
				bg:'',
				zhuanzhang:'',
				btn1:'',
				btn3:''
			}
		},
		watch: {
			num (val) {
				var reg = /^[0-9]\d*$/; //手机号验证
				if (!reg.test(val)) {
					val = val.substr(0, val.length - 1);
					this.num = val;
				}
				if (val != "" && val < 1) {
					this.num = 1;
				}
			}
		},
		onShow() {


		},
		methods: {
			allPay() {
				this.num = this.curDiamondIncome
			},
			// 提现记录
			record() {
				uni.navigateTo({
					url: './record'
				})
			},
			// 查看更多
			viewAll() {
				uni.navigateTo({
					url: './viewAll'
				})
			},
			exchangeDiamondIncome() {
				if(this.num==''){
					return
				}
				var data = {
					url: '/web/v2/api/userExtend/exchangeDiamondIncome',
					methods: 'post',
					data: {
						exchangeIncome: this.num
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.show=false
						uni.showToast({
							title: '成功兑换'+this.num+'个钻石',
							icon: 'none',
							duration: 2000
						});
						this.getList()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// 首页数据
			getList() {
				var data = {
					url: '/web/v2/api/user/currentIncome',
					methods: 'post',
					data: {
						apiVersion: '2.0'
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.curDiamondIncome = res.data.data.curDiamondIncome;
						this.incomeList = res.data.data.incomeList;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// 兑换宝石
			gemchange() {
				this.num=''
				this.show = true
			},
			// 提现 判断需要跳转的状态
			next() {
				
				
				uni.showToast({
					title: '更多精彩请下载“哩咔”APP',
					duration: 2000,
					icon: 'none'
				});
				return
				
				
				// 是否需要签名
			
				if (this.isFamilySlevel == 1) {
					// 签过名的判断 是否填写过银行卡信息
					if (this.isSignatureFlag == 1) {
						if (this.isWriteFlag == 1) {
							this.href =this.$BASE_URL+'/st/activityOp/likaWithDraw/withDraw.html'
							this.goPath()
						} else {
							this.href =this.$BASE_URL+'/st/activityOp/likaWithDraw/rankCard.html'
							this.goPath()
						}
					} else if (this.isSignatureFlag == 2) {
						this.href = this.$BASE_URL+'/st/activityOp/likaWithDraw/sign.html'
						this.goPath()
					} else if (this.isSignatureFlag == 3) {
						toast('签名审核中，审核通过后即可体验全新提现功能~ ')
					}
				} else {
					if (this.isWriteFlag == 1) {
						this.href = this.$BASE_URL+'/st/activityOp/likaWithDraw/withDraw.html'
						this.goPath()
					} else {
						this.href =this.$BASE_URL+'/st/activityOp/likaWithDraw/rankCard.html'
						this.goPath()
					}
				}
			},
			goPath(){
				uni.redirectTo({
					url:'../path/path?url='+this.href
				})
			},
			// 初始化
			init() {
				var data = {
					url: '/web/v2/api/newWebApi/withdraw/init',
					methods: 'post',
					data: {
						apiVersion: '2.0'
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.withdrawPointConfig = res.data.data.withdrawPointConfig;
						this.bankNumber = res.data.data.bankNumber;
						this.isFamilySlevel = res.data.data.isFamilySlevel;
						this.isWriteFlag = res.data.data.isWriteFlag;
						this.docUrl = res.data.data.docUrl;
						this.isSignatureFlag = res.data.data.isSignatureFlag;
						// localStorage.setItem('rankCardLength', this.withdrawPointConfig.bankNumber)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},

		},
		mounted() {
			this.init()
			this.getList()
			this.bg= this.$BASE_URL+'/st/mini/static/img/income/bg.png'
			this.zhuanzhang= this.$BASE_URL+'/st/mini/static/img/income/zhuanzhang@2x.png'

			this.btn1= this.$BASE_URL+'/st/mini/static/img/income/btn1.png'
			this.btn3= this.$BASE_URL+'/st/mini/static/img/income/btn3.png'
		},
		filters: {
			upddtFilter: function(date) {
				var date = new Date(date);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return MM + DD + " " + hh + mm;
			},
			typeFilter: function(val) {
				var status = '';
				switch (val) {
					case "12":
						status = '钻石礼物';
						break;
					case "14":
						status = '开启动态';
						break;
					case "15":
						status = '视频打赏';
						break;
					case "16":
						status = '活动';
						break;
					case "17":
						status = '钻石礼物';
						break;
					case "18":
						status = '订单收入';
						break;
					case "19":
						status = '订单退款';
						break;
					case "21":
						status = '守护收入';
						break;
					case "22":
						status = '聊天室贵宾席';
						break;
					case "30":
						status = '现金收入转入';
						break;
					default:
						status = '其他收入';
						break;
				}
				return status;
			}
		}

	}
</script>

<style lang="scss" scoped>
	
	.txian{
		margin: 0 auto;
		width:80%;
		// display:block;
		line-height: 80upx;
		background-image:url("https://webapp.shenghua6.cn/st/mini/static/img/income/zhuanzhang@2x.png");
	  background-size:100% 100%;	
	  color: #FFFFFF;
	  text-align: center;
	}
	
	.popupBox {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9998;
	}

	.popup-info {
		position: fixed;

		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 20upx;
		background-color: #fff;
		z-index: 9999;
	}

	.header {
		color: #FFFFFF;
		width: 100%;
		height: 300upx;

	}

	.nav {
		width: 100%;
		position: relative;
		z-index: 999;
		font-family: PingFangSC-Semibold;
		font-size: 40upx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 15;
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.bck {
		width: 40upx;
		height: 40upx;
	}

	.add {
		width: 130upx;
		font-size: 26upx;
		text-align: right;
		color: #fff;
		font-weight: normal;
		font-family: PingFangSC-Medium;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.content {
		padding: 0 30upx;
	}

	.second {
		display: flex;
		justify-content: space-between;
	}

	.content .gameMoney {
		font-family: PingFang-SC-Medium;
		font-size: 28upx;
		color: #FFFFFF;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 40upx;
	}

	.nums {
		font-size: 70upx;
	}

	.exchange {
		width: 150upx;
		height: 50upx;
		font-family: PingFangSC-Medium;
		font-size: 26upx;
		color: #FF574D;
		background-color: #fff;
		border-radius: 30upx;
		text-align: center;
		line-height: 50upx;
	}

	.question {
		border: solid 1px #fff;
		width: 25upx;
		height: 25upx;
		text-align: center;
		line-height: 20upx;
		border-radius: 50%;
		margin-left: 10upx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.des {
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}

	.second {
		margin-top: 35upx;
	}

	.show {
		width: 85%;
		border: solid 1px #EEEEEE;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 30upx;
		padding: 0 30upx;
		position: relative;
		top: -50upx;
	}

	.title {
		color: #333;
		font-size: 28upx;
		padding: 20upx 0;
		border-bottom: solid 1px #EEEEEE;
	}

	.detail {
		border-bottom: solid 1px #EEEEEE;
		padding: 20upx 0;
	}

	.more {
		padding: 20upx 0;
		text-align: center;
	}

	.gift {
		color: #6B6B6B;
		font-size: 30upx;
		position: relative;
	}

	.money {
		position: absolute;
		right: 60upx;
	}

	.time {
		font-size: 20upx;
		color: #A3A3A3;
	}

	.bt {
		width: 596upx;
		height: 88upx;
		position: relative;
		top: 50upx;
		left: 50%;
		transform: translateX(-50%);
		padding-bottom: 100upx;
	}

	.bt span {
		position: absolute;
		width: 100%;
		height: 100%;
		line-height: 88upx;
		text-align: center;
		color: #fff;
	}

	.icon {
		position: relative;
	}

	.icon:before {
		content: " ";
		display: inline-block;
		height: 0.7em;
		width: 0.7em;
		border-width: 1px 1px 0 0;
		border-color: #323232;
		border-style: solid;
		-webkit-transform: matrix(.51, .51, -0.51, .51, 0, 0);
		transform: matrix(.51, .51, -0.51, .51, 0, 0);
		position: absolute;
		top: 25%;
		left: 10%;
	}

	.change .prop1 {
		width: 540upx;
		height: 586upx;
		background: #FFFFFF;
		border-radius: 13upx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.change .prop1 .title {
		width: 475upx;
		height: 93upx;
		margin: 0 auto;
		border-bottom: 2upx solid #e5e5e5;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0;
		font-size: 32upx;
		color: #333333;
		letter-spacing: 0;
		text-align: justify;
		font-weight: bold;
	}

	.change .prop1 .icon1 {
		width: 6upx;
		height: 50upx;
		position: absolute;
		left: 0;
		top: 22upx;
		background: #ffc137;
		display: block;
	}

	.change .prop1 .num {
		width: 448upx;
		height: 78upx;
		background: #FFFFFF;
		border: 2upx solid #CACACA;
		border-radius: 13upx;
		display: block;
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		color: #B0B0B0;
		letter-spacing: 0;
		text-align: center;
		margin: 35upx auto 0 auto;
	}

	.change .prop1 .content {
		margin: 30upx 34upx 0 34upx;
		padding: 0;
	}

	.change .prop1 .contentTitle {
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		color: #333333;
		letter-spacing: 0;
		text-align: left;
	}

	.change .prop1 .contentNum {
		font-family: PingFang-SC-Medium;
		font-size: 36upx;
		color: #FFC137;
		letter-spacing: 0;
		text-align: center;
		margin-top: 24upx;
	}

	.change .prop1 .all {
		font-family: PingFang-SC-Medium;
		font-size: 22upx;
		color: #FE525F;
		letter-spacing: 0;
		text-align: center;
		margin-top: 36upx;
	}

	.change .prop1 .btn {
		width: 378upx;
		height: 86upx;
		margin: 41upx auto 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #FFFFFF;
		letter-spacing: 0;

	}

	.btnNone {
		width: 378upx;
		height: 86upx;
		margin: 41upx auto 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #FFFFFF;
		letter-spacing: 0;
	}
</style>
